<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商城后台首页</title>
	<link rel="stylesheet" href="./static/plugins/layui/css/layui.css"  media="all">
    <style>
        body{
            background: #F3F3F3;
            margin:0;
            font-family: Microsoft JhengHei, Microsoft YaHei;
            min-width: 1360px;
        }
        .header{position:fixed;top:0;height:60px;width:100%;background: #FFFFFF;border-bottom:1px solid #EBEBEB;}
        .navbar{position:fixed;top:0px;background:#393D49;width:200px;height:100%;}
        .logo-box{width:100%;height:60px;background: #FFFFFF;}
        .main{margin:10px 10px 10px 240px;height:100%;}
        ul.menu, ul.submenu{
            list-style: none;
            margin:0;
            padding:0;
            color:#5F78A2;
        }
        ul.menu{
            font-size:16px;
            color:#fff;
            margin-left:40px;
        }
        ul.menu > li:first-child{
            margin-top:20px;
        }
        ul.menu > li{
            margin-top:40px;
        }
        ul.menu > li.active div.title{
            color:rgba(255,255,255,.7);
        }
        ul.menu > li:hover{
            cursor: pointer;
        }
        ul.menu > li.active ul.submenu{
            display: block;
            color:#8EA8D2;
        }
        ul.menu >li div.title{
            margin-bottom: 10px;
            color:#5F78A2;
        }
        ul.menu >li div.title img.icon{
            width:25px;
            vertical-align: middle;
            margin-right:10px;
        }
        ul.menu >li div.title span.count{
            display: block;
            width:30px;
            background: #F48080;
            color:#fff;
            font-size: 12px;
            text-align: center;
            border-radius: 2px;
            height:18px;
            line-height: 18px;
            float:right;
            margin-top: 2px;
            margin-right:20px;
        }
        ul.submenu{
            margin-left:35px;
            display: none;
        }
        ul.submenu > li{
            padding:8px 0;
        }
        ul.submenu > li:hover{
            cursor: default;
        }
        ul.submenu > li >span.count{
            width:30px;
            display: block;
            text-align: center;
            float:right;
            margin-top: 2px;
            margin-right:20px;
        }
        .header{
            position: relative;
        }
        .header .left-bar{
            float: right;
			margin-right: 350px;
        }
        .header .left-bar img{
            width: 45px;
            height:45px;
            margin:5px 0;
            border-radius: 50%;
        }
        .header .left-bar>div.text{
            float:right;
            margin: 18px 0 15px 10px;
            color:#333;
            font-size:18px;
        }
        .header .right-bar{
            float:right;
            margin-right:20px;
        }
        .header .search-box{
            position: relative;
            margin-top: 12px;
        }
        .header .search-box>input.search{
            background: #F5F6F8;
            border-radius: 15px;
            padding:8px 0;
            width:200px;
            padding-left:40px;
            font-family: Microsoft JhengHei, Microsoft YaHei;
            border: 1px solid #E4E5E7;
        }
        .header .search-box>input.search:focus{
            outline: 0;
            box-shadow: 0px 0px 5px 0px #E4E5E7;
        }
        .header .search-box>img{
            position: absolute;
            top:8px;
            left:10px;
            width: 20px;
        }
        .header .fun-box{
            position: absolute;
            top: 15px;
            right: 0px;
        }
        .header .fun-box>.box{
            float:left;
            text-align: center;
            margin: 0 10px;
            margin-right: 20px;
            cursor: pointer;
        }
        .header .fun-box>.box>img{
            width: 28px;
        }
        .header .fun-box>.split{
            height:20px;
            width:1px;
            margin-top:4px;
            background:#DFDFDF;
        }
        .pos{
            position: relative;
        }
        .msg-circle{
            position: absolute;
            top: -5px;
            right: -5px;
            display: block;
            background: #FF5C5C;
            width: 8px;
            height:8px;
            border-radius: 50%;
        }
        div.loading{
            position: fixed;
            top:0;
            width: 100%;
            background: #fff;
            height:100%;
            opacity: .7;
            z-index: 1000;
        }
        div.loading> img{
            position: fixed;
            top:45%;
            left:50%;
        }
        div.wrapper{
            /*width: 1100px;*/
            /*margin: 0 auto;*/
        }
    </style>
</head>
<body>
<!-- 导航栏头部 -->
<div class="header">
    <div class="left-bar">
        <img src="http://wx.qlogo.cn/mmopen/vi_32/wD8TLG2TD9sdNeINq695Id7S1nfWCDTa0qOaMYETLgibBaYUU60mDhQKV30DYlWwsW2hqLEb0TGvdYYfy0icIiaPw/0" />
        <div class="text">MrShun</div>
    </div>
	<div class="layui-nav-item" lay-unselect="">
		<a href="javascript:;"><img src="http://t.cn/RCzsdCq" class="layui-nav-img">我<span class="layui-nav-more"></span></a>
		<dl class="layui-nav-child layui-anim layui-anim-upbit">
		  <dd><a href="javascript:;">修改信息</a></dd>
		  <dd><a href="javascript:;">安全管理</a></dd>
		  <dd><a href="javascript:;">退了</a></dd>
		</dl>
	</div>
    <div class="right-bar">
        <!-- 导航栏搜索框 -->
        <div class="fun-box">
            <div class="box">
                <img src="static/images/文件夹.svg" />
            </div>
            <div class="box split"></div>
            <div class="box">
                <img src="static/images/文件.svg" />
            </div>
            <div class="box split"></div>
            <div class="box pos">
                <img src="static/images/消息.svg" />
                <span class="msg-circle"></span>
            </div>
            <div class="box split"></div>
            <div class="box">
                <img src="static/images/设置.svg" />
            </div>
        </div>
    </div>
</div>
<!-- 左边导航区域 -->
<div class="navbar">
    <!-- Logo 以及系统名称 -->
    <div class="logo-box">
        <img src="static/images/logo.png" />
    </div>
    <ul class="menu">
        <li class="active">
            <div class="title"><img class="icon" src="static/images/订单-active.svg" />库存管理</div>
            <ul class="submenu">
                <li data-url="page/order/main.html">总部总仓</li>
                <li>西南商城</li>
                <li>华北总代仓</li>
            </ul>
        </li>
        <li>
            <div class="title"><img class="icon" src="static/images/订单.svg" />订单管理<span class="count">17</span></div>
            <ul class="submenu">
                <li>代收款 <span class="count">20</span></li>
                <li>待发货 <span class="count">15</span></li>
                <li>待收货 <span class="count">5</span></li>
                <li>待反馈 <span class="count">2</span></li>
            </ul>
        </li>
        <li>
            <div class="title"><img class="icon" src="static/images/订单.svg" />用户管理</div>
            <ul class="submenu">
                <li>总部总仓</li>
                <li>西南商城</li>
                <li>华北总代仓</li>
            </ul>
        </li>
        <li>
            <div class="title"><img class="icon" src="static/images/订单.svg" />物流配置<span class="count">17</span></div>
            <ul class="submenu">
                <li>总部总仓</li>
                <li>西南商城</li>
                <li>华北总代仓</li>
            </ul>
        </li>
        <li>
            <div class="title"><img class="icon" src="static/images/订单.svg" />数据统计</div>
            <ul class="submenu">
                <li>销售统计对比</li>
                <li>数据报表</li>
                <li>对账反馈</li>
            </ul>
        </li>
        <li>
            <div class="title"><img class="icon" src="static/images/订单.svg" />结算查询</div>
            <ul class="submenu">
                <li>总部总仓</li>
                <li>西南商城</li>
                <li>华北总代仓</li>
            </ul>
        </li>
        <li>
            <div class="title"><img class="icon" src="static/images/订单.svg" />合作厂商</div>
            <ul class="submenu">
                <li>合作伙伴</li>
                <li>合同厂商</li>
                <li>供应商</li>
            </ul>
        </li>
        <li>
            <div class="title"><img class="icon" src="static/images/订单.svg" />文件下载</div>
            <ul class="submenu">
                <li>总部总仓</li>
                <li>西南商城</li>
                <li>华北总代仓</li>
            </ul>
        </li>
    </ul>
</div>
<!-- 中间内容main部分用来接受页面 -->
<div class="main">
<ul class="layui-nav">
  <li class="layui-nav-item">
    <a href="">控制台<span class="layui-badge">9</span></a>
  </li>
  <li class="layui-nav-item">
    <a href="">个人中心<span class="layui-badge-dot"></span></a>
  </li>
  <li class="layui-nav-item" lay-unselect="">
    <a href="javascript:;"><img src="http://t.cn/RCzsdCq" class="layui-nav-img">我<span class="layui-nav-more"></span></a>
    <dl class="layui-nav-child layui-anim layui-anim-upbit">
      <dd><a href="javascript:;">修改信息</a></dd>
      <dd><a href="javascript:;">安全管理</a></dd>
      <dd><a href="javascript:;">退了</a></dd>
    </dl>
  </li>
<span class="layui-nav-bar" style="left: 245px; top: 55px; width: 0px; opacity: 0;"></span></ul>
    <div class="wrapper">
        <div style="margin:10px 0;">
			<span class="layui-breadcrumb" style="visibility: visible;">
			  <a href="/">首页</a><span lay-separator="">/</span>
			  <a href="/demo/">演示</a><span lay-separator="">/</span>
			  <a><cite>导航元素</cite></a>
			</span>
		</div>
        <div style="font-size:14px;color:#BABABA;margin:10px 0;">本日订单管理内容已更新</div>
        <div class="page">

        </div>
    </div>
</div>
<script src="static/js/jquery.min.js"></script>
<script src="./static/plugins/layui/layui.all.js"></script>
<script type="text/javascript">
    $(function () {
        //手风琴导航栏效果
        $("ul.menu>li>div.title").click(function(){
            var _that = $(this).parent();
            var sub = _that.find("ul.submenu");
            if(_that.hasClass("active")) {
                sub.slideUp(300,function(){
                    _that.removeClass("active");
                });
            }else{
                _that.siblings().removeClass("active").find("ul.submenu").slideUp(200,function(){
                    _that.siblings().removeClass("active");
                });
                sub.slideDown(300,function(){
                    _that.addClass("active");
                });
            }
        });

        //加载html页面
        var load = function(url){
            $("body").append('<div class="loading"><img src="static/images/loading.svg" /></div>')
            $.get(url, function (content) {
                $("div.page").html(content);
                setTimeout(function () {
                    $("div.loading").remove();
                }, 1000);
            }, "html");
        }

        //点击子菜单li, 加载page页面到main里面
        $("ul.submenu>li").click(function(){
            //获取 li里面的data-url
            var url = $(this).attr("data-url");
            if(url && url.length)
                load(url);
            else
                alert("没有配置 data-url");
        });

        load("page/order/main.html");
    });
</script>
</body>
</html>